<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>地铁路线查询为您服务</title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=subway&v=1.0&ak=qg9PHYboQU1S8n22m2FS5ajknGmiUDQg"></script>

</head>
<body>

<div id="subwayxx" class="box-body" style="height: 500px;width: 1200px">
    <div id="dtmapInput">

        <input id="dtName" type="text" placeholder="请输入城市" style="width:100px; margin-right:10px;"/>
        <input type="button" value="地铁查询" onclick="dtcx()"/><p id="dtp" style="color: #3e3e3e">先进行地铁查询才能进行地铁路线规划</p>
        <input type="text" id="subStartId" placeholder="起始站" size="20" style="width:150px;display: none"/>
        <input type="text" id="subEndId" placeholder="终止站" size="20" style="width:150px; display: none"/>
        <button id="subRouteBtn" onclick="subRouteBtn()" style="display: none">线路规划</button>

    </div>
    <div id="container"></div>
    <script type="text/javascript">
        var subwayCityName = null;
        var subwaycity = null;
        var list = null;

        // 显示路线按钮以及城市地铁查询
        function dtcx() {
            // 显示地铁路线的输入框
            document.getElementById("subStartId").style.display = "";//显
            document.getElementById("subEndId").style.display = "";//显
            document.getElementById("subRouteBtn").style.display = "";//显
            document.getElementById("dtp").style.display = "none";//隐

            // 清空输入框的信息
            document.getElementById("subStartId").value = "";
            document.getElementById("subEndId").value = "";


            subwayCityName = document.getElementById("dtName").value;
            list = BMapSub.SubwayCitiesList;
            subwaycity = null;
            for (var i = 0; i < list.length; i++) {
                if (list[i].name === subwayCityName) {
                    subwaycity = list[i];
                    break;
                }
            }
            var subway = new BMapSub.Subway('container', subwaycity.citycode);
            var zoomControl = new BMapSub.ZoomControl({
                anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
                offset: new BMapSub.Size(10, 100)
            });
            subway.addControl(zoomControl);
        }

        // 路线查询
        function subRouteBtn() {
            // 获取输入的起始终止站
            var subStart = document.getElementById("subStartId").value;
            var subEnd = document.getElementById("subEndId").value;
            // 获取地铁数据-初始化地铁图
            var subway = new BMapSub.Subway('container', subwaycity.citycode);
            var zoomControl = new BMapSub.ZoomControl({
                anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
                offset: new BMapSub.Size(10, 100)
            });
            subway.addControl(zoomControl);
            subway.addEventListener('subwayloaded', function () {
                var drct = new BMapSub.Direction(subway);
                drct.search(subStart, subEnd);
            });
            document.getElementById("subStartId").value = null;
            document.getElementById("subEndId").value = null;
            // subway.addEventListener('directioncomplete', function() {
            //     alert('可以自定义点击详情后的操作！');
            // });
        }
    </script>

    <script>
        /**
         * 从所有城市列表中获取北京信息
         * 结果格式
         * {
         *     keyword: 'beijing',
         *     name: '北京',
         *     citycode: '131'
         * }
         */
        /* globals BMapSub */
        var subwayCityName = '北京';
        var list = BMapSub.SubwayCitiesList;
        var subwaycity = null;
        for (var i = 0; i < list.length; i++) {
            if (list[i].name === subwayCityName) {
                subwaycity = list[i];
                break;
            }
        }
        // 获取北京地铁数据-初始化地铁图
        var subway = new BMapSub.Subway('container', subwaycity.citycode);
        var zoomControl = new BMapSub.ZoomControl({
            anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
            offset: new BMapSub.Size(10, 100)
        });
        subway.addControl(zoomControl);
        subway.addEventListener('subwayloaded', function () {
            var drct = new BMapSub.Direction(subway);
            drct.search('', '');
        });
        // subway.addEventListener('directioncomplete', function() {
        //     alert('可以自定义点击详情后的操作！');
        // });

    </script>
</div>

</div>
</body>
</html>